﻿<DemoPageSectionComponent Id="Navigation-Menu-Orientation" ShowSizeMode="true" VerticalAlignment="VerticalAlignment.Top">
    <ChildContentWithParameters Context="Params">
        <div class="cw-640">
            <div class="card">
                <DxMenu Title="DevExpress"
                        Orientation="Orientation"
                        DisplayMode="DisplayMode"
                        CollapseItemsToHamburgerMenu="true"
                        SizeMode="@Params.SizeMode">
                    <Items>
                        <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon">
                            <Items>
                                <DxMenuItem Text="News">
                                    <Items>
                                        <DxMenuItem Text="Explore our newest features" />
                                        <DxMenuItem Text="Website news" />
                                    </Items>
                                </DxMenuItem>
                                <DxMenuItem Text="Our Mission" />
                                <DxMenuItem Text="Our Customers" />
                            </Items>
                        </DxMenuItem>
                        <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon">
                            <Items>
                                <DxMenuItem Text="Blazor" />
                                <DxMenuItem Text="ASP.NET MVC" />
                                <DxMenuItem Text="ASP.NET Web Forms" />
                                <DxMenuItem Text="ASP.NET Core" />
                                <DxMenuItem Text="Bootstrap Web Forms" />
                            </Items>
                        </DxMenuItem>
                        <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon">
                            <Items>
                                <DxMenuItem Text="Getting Started" />
                                <DxMenuItem Text="Documentation" />
                                <DxMenuItem Text="Support Center" />
                                <DxMenuItem Text="Code Examples" />
                                <DxMenuItem Text="Blogs" />
                            </Items>
                        </DxMenuItem>
                    </Items>
                </DxMenu>
            </div>
        </div>
    </ChildContentWithParameters>
    <OptionsContent>
        <OptionComboBox Label="Display Mode:" CssClass="ow-100" Data="@DisplayModes" @bind-Value="@DisplayMode"></OptionComboBox>
        <OptionComboBox Label="Orientation:" CssClass="ow-120" Data="@OrientationOptions" @bind-Value="@Orientation"></OptionComboBox>
    </OptionsContent>

    @code {
        /*BeginHide*/
        IEnumerable<MenuDisplayMode> DisplayModes { get; } = Enum.GetValues<MenuDisplayMode>();
        IEnumerable<Orientation> OrientationOptions { get; } = Enum.GetValues<Orientation>();
        /*EndHide*/
        MenuDisplayMode DisplayMode { get; set; } = MenuDisplayMode.Mobile;
        Orientation Orientation { get; set; } = Orientation.Vertical;
    }
</DemoPageSectionComponent>
